<template>
  <div id="classify1">
    <vue-waterfall-easy
      id="fall"
      :imgsArr="imgsArr"
      @scrollReachBottom="getData"
      :maxCols="3"
      :imgWidth="500"
      :linkRange="'img'"
    >
      <div slot="waterfall-head">
        <div class="head_classify1">
          <head-classify1></head-classify1>
          <nav-classify1></nav-classify1>
        </div>
        <div class="type_intro">
          <p>Sky</p>
          <p>Free stunning HD wallpapers for your mobile and desktop screens.</p>
        </div>
      </div>
      <div class="img-info" slot-scope="props">
        <a :href="props.value.src" download>下载</a>
        <i
          v-if="changeStatus(props.index+1)"
          class="iconfont icon-shoucang shoucang"
          :class="{active: true}"
          @click="deleteCollect(props.index+1)"
        ></i>
        <i
          v-else
          class="iconfont icon-shoucang shoucang"
          :class="{active: false}"
          @click="addCollect(props.index+1)"
        ></i>
      </div>
    </vue-waterfall-easy>
  </div>
</template>

<script>
import HeadClassify1 from "./../classify1/components/Head";
import NavClassify1 from "@/components/Nav";
import vueWaterfallEasy from "vue-waterfall-easy";
import axios from "axios";
export default {
  name: "Classify4",
  components: {
    HeadClassify1,
    NavClassify1,
    vueWaterfallEasy
  },
  data() {
    return {
      userName: sessionStorage.userName,
      Collections_img: [],
      isSelected: false,
      count: 0,
      imgsArr: [],
      group: 0,
      busy: false
    };
  },
  methods: {
    deleteCollect(index) {
      console.log("取消收藏");
      console.log(this.imgsArr[index - 1].id);
      let deleteCollection = {
        imgid: this.imgsArr[index - 1].id,
        username: this.userName
      };
      axios.post("api/deleteCollection", deleteCollection).then(() => {
        console.log("取消收藏成功");
      });
    },
    addCollect(index) {
      //判断是否登录
      if (this.userName) {
        console.log("添加收藏");
        //把用户名字和图片id传进去  this.imgsArr[i].id
        console.log(this.imgsArr[index - 1].id);
        let collectionJson = {
          imgid: this.imgsArr[index - 1].id,
          username: this.userName
        };
        axios.post("api/addCollection", collectionJson).then(() => {
          console.log("添加收藏成功");
        });
      } else {
        alert("请先登录");
      }
    },
    changeStatus(index) {
      for (let i = index - 1; i < this.imgsArr.length; i++) {
        for (let j = 0; j < this.Collections_img.length; j++) {
          if (this.Collections_img[j].id === this.imgsArr[i].id) {
            return true;
          }
        }
        return false;
      }

      // }
    },
    getCollectionsURL() {
      axios.get("api/collection/" + this.userName).then(res => {
        res = res.data;
        console.log(res);
        if (res.data) {
          const data = res.data;
          this.Collections_img = data;
        }
      });
    },
    toggleCollect() {
      this.isSelected = !this.isSelected;
    },
    getData() {
      axios.get("api/OthersImage?group=" + this.group).then(res => {
        this.group++;
        // if (this.group === 2) {
        //   this.$refs.waterfall.waterfallOver();
        //   return;
        // }
        this.imgsArr = this.imgsArr.concat(res.data.data);
      });
    },
    getSwiperURl() {
      axios.get("static/mock/swipers.json").then(res => {
        console.log(res);
        res = res.data;
        if (res.data) {
          const data = res.data;
          this.SwiperURL = data.indexImgs;
        }
      });
    }
  },
  mounted() {
    this.getData();
    document.querySelector("body").setAttribute("style", "overflow:hidden");
  },
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "overflow:hidden");
  },
  //销毁前清除
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  }
};
</script>

<style scoped>
.head_classify1 {
  background-color: black;
}
.type_intro {
  width: 80%;
  margin: 4vw auto;
}
.vue-waterfall-easy-container {
  height: 1000px !important;
}
.type_intro p:nth-of-type(1) {
  font-size: 50px;
}
.type_intro p:nth-of-type(2) {
  margin: 15px 0 25px 0;
  font-size: 30px;
}
.active {
  color: red;
}
a:visited {
  color: #2d8cf0;
}
</style>
